
// 导入 axios 库
import axios from 'axios';
// 导入 useEffect 钩子(Hook)
import { useEffect } from 'react';
// 导入 useNavigate 钩子(Hook)
import { useNavigate , useParams } from 'react-router-dom';
// 导入 Ant Design 组件
import { Button, Form, Input, Radio, Select, DatePicker, Space } from 'antd';
// 导入 Moment 库 (用来处理日期时间的库)
import moment from 'moment';

function LoongEditView(){

    const navigate = useNavigate();
    const params = useParams();
    const [form] = Form.useForm();

    const fetchData = () => {
        const url = `/back/loong/find/${params.id}`;
        axios.get(url).then( resp => {
            let { success, message, result } = resp.data;
            if( success ) {
                const fieldDatas = [
                    { name: 'id' , value: params.id },
                    { name: 'name' , value: result.name },
                    { name: 'gender' , value: result.gender },
                    // 借助于 moment 函数将 字符串 解析为 Moment实例
                    { name: 'birthdate' , value: moment( result.birthdate )},
                    { name: 'hometown' , value: result.hometown }
                ];
                form.setFields( fieldDatas );
                return;
            }
        }).catch( cause => {
            console.log( cause );
        });
    }

    useEffect( fetchData , [] );

    const options = {
        labelCol: { span: 4 },
        wrapperCol: { span: 12 },
        autoComplete: "off",
    }

    const finish = values => {
        const params = { ...values };
        params.birthdate = params.birthdate.format('YYYY-MM-DD');
        const url = '/back/loong/update';
        axios.put( url , params ).then( resp => {
             // 解构赋值 (这里使用的属性名与后端路由返回的JSON字符串相对应)
             let { success, message , result } = resp.data ;
             if( success ) {
                 navigate( '/function/list' ); // 编程式导航
                 return; // 让方法立即结束
             }
             console.log( message , result );
         }).catch( reason => {
             console.log( reason );
         })
    }

    return (
        <div className="edit">
            <p>编辑</p>
            <Form {...options} form={form} onFinish={ finish }>
                <Form.Item label="编号" name="id">
                    <Input disabled/>
                </Form.Item>
                <Form.Item label="姓名" name="name" rules={[ { required: true, message: '请输入姓名'}]}>
                    <Input />
                </Form.Item>
                <Form.Item label="性别" name="gender" rules={[ { required: true, message: '请选择性别'}]}>
                    <Radio.Group optionType="button" buttonStyle="solid" >
                        <Radio value="male">靓仔</Radio>
                        <Radio value="female">靓妹</Radio>
                    </Radio.Group>
                </Form.Item>
                <Form.Item label="出生日期" name="birthdate" rules={[ { required: true, message: '请选择日期'}]}>
                    {/* 用 format 指定日期格式(用于显示) */}
                    <DatePicker format="YYYY年MM月DD日" style={ { width: '100%' } }/>
                </Form.Item>
                <Form.Item label="籍贯" name="hometown" rules={[ { required: true, message: '请选择籍贯'}]}>
                    <Select>
                        <Select.Option value="东海">东海</Select.Option>
                        <Select.Option value="南海">南海</Select.Option>
                        <Select.Option value="西海">西海</Select.Option>
                        <Select.Option value="北海">北海</Select.Option>
                    </Select>
                </Form.Item>
                <Form.Item wrapperCol={ { offset: 4, span: 12 } }>
                    <Space>
                        <Button type="primary" htmlType="submit">修改</Button>
                        <Button htmlType="button" onClick={fetchData}>重置</Button>
                    </Space>
                </Form.Item>
            </Form>
        </div>
    )

}

export default LoongEditView;